<template>
  <div class="CsvUploadBox">
    <el-dialog title="csv" :visible.sync="csvBoxVisible" width="30%"
    v-loading="loading"
    :element-loading-text="loadingText"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
      <el-upload
        class="upload-demo"
        drag
        :before-upload="beforeUpload"
        :with-credentials="true"
        :on-success="successUpload"
        :action="baseUrl+ '/upload'"
        :file-list="fileList"
        ref="upload"
        :data="uploadData"
        :on-change="onChange"
        :auto-upload="false"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        {{uploadData.md5}}
        <div class="el-upload__tip" slot="tip">只能上传csv文件</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        
        <el-button @click="upload" type="primary" >上 传</el-button>
        <el-button @click="setCsvBoxVisible(false)">取 消</el-button>
      </span>
    </el-dialog>

    <load-sheet
      :loadSheetBoxVisible="loadSheetBoxVisible"
      :data="data"
      v-on:set-load-sheet-box-visible="setLoadSheetBoxVisible"
    ></load-sheet>
  </div>
</template>

<script>
import LoadSheet from "@/components/common/LoadSheet.vue";
export default {
  components: {
    LoadSheet,
  },
  props: ["csvBoxVisible"],
  data() {
    return {
      loadSheetBoxVisible: false,
      data: null,
      loadingText:"正在生成该文件的MD5",
      uploadData: { md5: null },
      loading: false,
      cantUpload: true,
      fileList: [],
      count:0,
    };
  },
  methods: {
    checkSuffix(name, type) {
      let index = name.lastIndexOf(".");

      let suffix = name.substr(index + 1);

      return type.indexOf(suffix) != -1;
    },
    setLoadSheetBoxVisible(val) {
      this.loadSheetBoxVisible = val;
    },
    setCsvBoxVisible(val) {
      this.$emit("set-csv-box-visible", val);
    },
    successUpload(res) {
      //如果上传成功后
      if (res.code == 200) {
        this.loading = false
        this.uploadData.md5 = null
        
        this.setCsvBoxVisible(false);
        this.data = res.data;
        this.loadSheetBoxVisible = true;

      }
    },
    onChange(file, fileList) {
      ++this.count

      if(this.count >= 2){
        this.count = 0
        return
      }
      let that = this;
      // if (this.uploadData.md5) return;
      console.log("onChange")      
      let res = this.checkSuffix(file.name, "csv");
      this.cantUpload = !res

      if(fileList.length > 1)
        fileList.splice(0, 1)

      if (!res) {
        this.$message.error("文件格式错误！");
        return;
      }

      this.loading = true
      //将文件的MD5值赋值给uploadData
      const fr = new FileReader();
      console.log("读取文件")
      fr.readAsArrayBuffer(file.raw);
      fr.onload = function () {
        let md5 = that.$md5(this.result);
        that.uploadData.md5 = md5;
        console.log("设置MD5")
        that.loading = false
      };

      console.log(that.uploadData.md5);
    },
    upload(){
      if(this.cantUpload){
        this.$message.error("文件格式错误，不可上传");
        return
      }

      this.loadingText = "服务端正在读取该文件"
      this.loading = true

      this.$refs.upload.submit();
    },
    beforeUpload(file) {


      let res = this.checkSuffix(file.name, "csv");

      if (!res) {
        this.$message.error("文件格式错误！");
      }


      return res;
    },
  },
};
</script>

<style scoped>
</style>